<template>
  <div>
    <!-- 使用类型(0: 全场通用 1:指定分类 2:指定商品)  -->
    <div v-if="couponInfo.type===1">
      <el-card header="指定分类">
        <el-table :data="couponInfo.productCategoryList">
          <el-table-column prop="name" label="分类名称" width="260"></el-table-column>
          <el-table-column prop="level" label="分类层级" width="260"></el-table-column>
          <el-table-column prop="navStatus" label="导航栏显示状态" width="260">
            <template slot-scope="{row}">
              <el-tag v-if="row.navStatus === 1" type="success">显示</el-tag>
              <el-tag v-else type="info">不显示</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="icon" label="图标" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.icon==''">暂无</span>
              <el-image v-else :src="scope.row.icon" style="width: 40px; height: 40px" fit="fill"
                        :preview-src-list="[scope.row.icon]"/>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="200"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="gmtCreate" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.gmtCreate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div v-else>
      <el-card header="指定商品">
        <el-table :data="couponInfo.productList">
          <el-table-column type="expand">
            <template slot-scope="{row}">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="副标题:">
                  <span>{{ row.subTitle }}</span>
                </el-form-item>
                <el-form-item label="所属品牌:">
                  <span>{{ row.brandName }}</span>
                </el-form-item>
                <el-form-item label="描述:">
                  <span>{{ row.pdesc }}</span>
                </el-form-item>
                <el-form-item label="促销价格:">
                  <span>{{ row.promotionPrice }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column label="图片" align="center" prop="pic" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.pic==''">暂无</span>
              <el-image v-else :src="scope.row.pic" style="width: 60px; height: 60px" fit="fill"
                        :preview-src-list="[scope.row.pic]"/>
            </template>
          </el-table-column>
          <el-table-column prop="albumPics" align="center" label="轮播图" width="120px">
            <template slot-scope="{row}">
              <div class="carousel">
                <el-carousel height="60px" arrow="never" indicator-position="none">
                  <el-carousel-item v-for="item in row.albumPics.split(',')" :key="item">
                    <el-image style="width: 100px; height: 60px" :src="item" fit="fill"/>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center" prop="name" :show-overflow-tooltip="true"/>
          <el-table-column label="分类" align="center" prop="productCategoryId" :show-overflow-tooltip="true"
                           :formatter="productCategoryFormat"/>
          <el-table-column label="价格" align="center" prop="price" :show-overflow-tooltip="true"/>
          <el-table-column label="购买可获取积分" align="center" prop="point" :show-overflow-tooltip="true"/>
          <el-table-column label="销量" align="center" prop="sale" :show-overflow-tooltip="true"/>
          <el-table-column label="创建时间" align="center" prop="gmtCreate" width="100">
            <template slot-scope="{row}">
              <span>{{ parseTime(row.gmtCreate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="ub main-center" style="margin-top: 20px">
      <el-button @click="toCoupon">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getCoupon } from '@a/beauty/coupon'
import { getSecondLevelProductCategories } from '@a/beauty/productCategory'

export default {
  name: 'detail',
  data() {
    return {
      // 卡券详情
      couponInfo: {},
      // 商品分类 id name
      productCategoryOptions: []
    }
  },
  created() {
    let couponId = this.$route.params.couponId
    this.getCouponInfo(couponId)
    this.getProductCategoryOptionSelect()
  },
  methods: {
    // 字典翻译
    productCategoryFormat(row, column) {
      return this.selectOptionName(this.productCategoryOptions, row.productCategoryId)
    },
    // 获取卡券详情
    getCouponInfo(couponId) {
      getCoupon(couponId).then(res => {
        this.couponInfo = res.data
      })
    },
    // 获取商品分类列表
    getProductCategoryOptionSelect() {
      getSecondLevelProductCategories().then(response => {
        this.productCategoryOptions = response.data
      })
    },
    // 返回coupon列表页面
    toCoupon() {
      this.$router.push('/marketing/coupon')
    }
  }
}
</script>

<style scoped>

</style>
